<template>
  <div>
    <div class="layui-row">
      <div class="layui-col-md12">
        <div id="monthlyConsume" style="height: 300px"></div>
      </div>
      <!-- <div v-else class="noPermiss">
        <NoPermiss :title="title"></NoPermiss>
      </div> -->
    </div>
  </div>
</template>

<script setup name="monthlyConsumeBar">
import * as echarts from "echarts";
import NoPermiss from "@/components/NoPermiss/index";

const { proxy } = getCurrentInstance();
const props = defineProps({
  permissionList: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Array,
    default: [],
  },
});

const echart = ref("");
const permission = computed(() => {
  return props.permissionList;
});

const options = reactive({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999",
      },
    },
  },
  color: ["#3db2ee"],
  xAxis: {
    name: "维修工程师",
    type: "category",
    axisLabel: {
      interval: 0,
      rotate: 40,
    },
  },
  grid: {
    bottom: 140 + "px",
    x: 40,
  },
  yAxis: {
    name: "维修次数",
    type: "value",
  },
  series: [
    {
      name: "维修次数",
      type: "bar",
      barWidth: "10%",
      smooth: true,
    },
  ],
});
watch(
  () => props.data,
  (val) => {
    let maintenanceUserName = [];
    let maintenanceCount = [];
    val.map((item) => {
      maintenanceUserName.push(item.maintenanceUserName);
      maintenanceCount.push(item.maintenanceCount);
    });
    options.xAxis.data = maintenanceUserName;
    options.series[0].data = maintenanceCount;

    if (!(val && val.length)) {
        if(echart.value){
            echart.value.setOption(options);
        }
      return;
    }

    let dom = document.getElementById("monthlyConsume");
    dom.removeAttribute("_echarts_instance_");
    echart.value = echarts.getInstanceByDom(dom);
    if (echart.value === undefined || !echart.value) {
      echart.value = echarts.init(dom);
    }

    echart.value.setOption(options);

    window.addEventListener("resize", () => {
      echart.value.resize();
    });
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style scoped lang="scss">
.el-menu-box {
  max-height: 500px;
  overflow: hidden;
  overflow-y: auto;
}
.noPermiss {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-price .date-list {
  display: flex;
  font-size: 12px;
}
.tab-price .date-list p {
  padding: 3px 5px;
  cursor: pointer;
}
.monthly-nav {
  display: flex;
  align-items: center;
  .monthly-nav-item {
    padding-right: 12px;
    .el-icon-arrow-down {
      font-size: 14px;
    }
    .monthly-nav-item-check-btn {
      //background-color: #6dc1a9;
      color: #ffffff;
    }
  }
}
</style>
